<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点属性 nodeName</title>
</head>
<body>
    <div id="acc">
        hoduunren
    </div>
    <div id="app">
        <h1>后盾人</h1>
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div>
        <div class="xiangjun"><!--向军大叔--></div>
    </div>
    <script>
        //nodeName制定节点的名称
        //下面来操作nodeName

        //1元素名称如DIV
        //2属性名称
        //3#text      文本节点
        //8#comment 注释
        // const node = document.querySelector(`#app`);
        // console.log(node.nodeName);//DIV
        // console.log(node.firstChild.nodeName);//#text

        // const xj = document.querySelector('.xiangjun');
        // console.log(xj.childNodes[0].nodeName);

        //tagName
        //nodeName可以获取不限于元素的节点名称,tagName仅能用于获取元素节点名称
        // const node = document.querySelector("h1");
        // console.log(node.tagName);     
        

        //nodeValue
        //元素节点是没有nodeValue的
        // const node = document.querySelector("#app");
        // console.log(node.nodeValue);//null

        // //元素节点下面的文本节点是有nodeValue的
        // const hdcms = document.querySelector(".hdcms");
        // console.log(hdcms.firstChild.nodeValue);

        // //文本节点和注释节点都是有可以通过nodeValue获取到内容的
        // //firstChild  获取第一个节点   childNodes[0]获取第一个节点
        // const xj = document.querySelector(".xiangjun");
        // console.log(xj.firstChild.nodeValue);
        // console.log(xj.childNodes[0].nodeValue);

        //总之一句话  使用data属性可以获取到节点的值
        //使用data属性获取节点内容

        //文本节点和注释节点可以获取到nodeValue
        // const app = document.querySelector("#app");
        // console.log(app.childNodes[1].childNodes[0].data);

        // const acc = document.getElementById("acc");
        // console.log(acc.firstChild.data);
    </script>
</body>
</html>